<template>
    <div>
        <el-card>
            <template #header>
                <div>
                    <el-form :model="formData" ref="form" label-width="80px" :inline="false">
                        <!-- 基本信息 -->
                        <el-divider content-position="left">生产计划信息</el-divider>
                        <el-row :gutter="24">
                            <el-col :span="8">
                                <el-form-item label="计划编号" prop="planId">
                                    <el-input v-model="formData.planId" placeholder="请输入计划编号" disabled />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="计划名称" prop="planName">
                                    <el-input v-model="formData.planName" placeholder="请输入计划名称" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="计划类型" prop="planType">
                                    <el-select v-model="formData.planType" placeholder="请选择计划类型" style="width:100%"
                                        disabled>
                                        <el-option v-for="item in planTypeOptions" :key="item.value" :label="item.label"
                                            :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!--订单信息-->
                        <el-divider content-position="left">订单信息</el-divider>
                        <el-row :gutter="24">
                            <el-col :span="8">
                                <el-form-item label="订单编号" prop="saleOrderId">
                                    <el-select v-model="formData.salesOrderId" @change="handleOrderChange"
                                        placeholder="请输入订单编号">
                                        <el-option v-for="item in salesOrderIdOptions" :label="item.quotationId"
                                            :value="item.quotationId"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="计划状态" prop="planStatus">
                                    <el-select v-model="formData.planStatus" placeholder="请选择计划状态" style="width:100%">
                                        <el-option v-for="item in planStatusOptions" :key="item.value"
                                            :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="开始时间" prop="startDate">
                                    <el-date-picker v-model="formData.startDate" type="datetime" placeholder="选择开始时间"
                                        value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="8">
                                <el-form-item label="结束时间" prop="endDate">
                                    <el-date-picker v-model="formData.endDate" type="datetime" placeholder="选择结束时间"
                                        value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户编号" prop="quotationCustomerResourcesId">
                                    <el-input v-model="formData.quotationCustomerResourcesId" placeholder="客户编号将自动显示"
                                        disabled />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户名称" prop="customerResourcesName">
                                    <el-input v-model="formData.customerResourcesName" placeholder="客户名称将自动显示"
                                        disabled />
                                </el-form-item>
                            </el-col>


                        </el-row>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm">立即修改</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
        </el-card>
    </div>
</template>

<script setup>

import { ref, defineEmits, defineProps } from 'vue';

let emits = defineEmits(['ref-table'])
import request from '@/api/request'
let props = defineProps(["data"])
import { useRouter } from 'vue-router'

const router = useRouter()


let formData = ref({ ...props.data })

let salesOrderIdOptions = ref([])



let loadData = () => {
    request({
        url: "/quotation",
        method: "get",
        params: {
            page: 1,
            size: 10000,
        }
    }).then(res => {
        console.log(res)
        salesOrderIdOptions.value = res.data.records
        //根据单个订单编号获取对应的客户信息
        // request({
        //     url: "/CustomerResources",
        //     method: "get",
        //     params: {
        //         quotationCustomerResourcesId: res.data.records[0].quotationCustomerResourcesId
        //     }
        // }).then(res => {
        //     console.log(res)
        //     formData.value.quotationCustomerResourcesId = res.data.customerName
        // })
    })
}

// 处理订单选择变化
const handleOrderChange = async (salesOrderId) => {
    if (!salesOrderId) return;

    // 从已加载的订单数据中查找选中的订单
    const selectedOrder = salesOrderIdOptions.value.find(
        order => order.quotationId === salesOrderId
    );

    if (selectedOrder) {
        formData.value.quotationCustomerResourcesId = selectedOrder.quotationCustomerResourcesId;

        // 获取客户详细信息
        const res = await request({
            url: "/CustomerResources",
            method: "get",
            params: {
                page: 1,
                size: 10000,
                quotationCustomerResourcesId: selectedOrder.quotationCustomerResourcesId,
            }
        })
        //获取客户名称
        for (let i = 0; i < res.data.records.length; i++) {
            if (res.data.records[i].customerResourcesId == selectedOrder.quotationCustomerResourcesId) {
                formData.value.customerResourcesName = res.data.records[i].customerResourcesName;
            }
        }
    };
  
}
loadData()


let planTypeOptions = [
    { label: '销售订单', value: 1 },
    { label: '库存计划', value: 2 },
]

let planStatusOptions = [
    { label: '未开始', value: 1 },
    { label: '已确认', value: 2 },
    { label: '已取消', value: 4 },
]

let submitForm = () => {
    
    request({
        url: "/production/plan/update",
        method: "put",
        data: formData.value,
    }).then(res => {
        console.log(res)
        if (res.code === 200) {
            alert("修改成功")
            emits("ref-table")
        } else {
            alert("修改失败")
        }
        router.push('/production/order')
        emits("ref-table")
    })
}
</script>

<style scoped></style>
